<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据开发工具</title>
    <link href="../../skins/plugins/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../skins/plugins/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="../../skins/develop/css/index.css">
    <link rel="stylesheet" href="../../skins/plugins/layui/css/layui.css">
</head>
<style>
    .layui-header {
        width: 100%;
        line-height: 50px;
        background: #081a3c;
        box-shadow: 3px 3px 8px #081a3c;
        position: fixed;
        z-index: 999;
    }
    .layui-layout-admin .layui-header {
        background-color: #081a3c;
    }
    .layui-header .layui-nav .layui-nav-item-active{
        border-bottom: 5px solid #0cc1f1;
        background-color: #0d3b6b;
    }

    .layui-skin-balck .layui-side {
        background-color: #081a3c!important;
    }
    .nav > li.active {
        border-left: 4px solid #3e75bf;
        background: #0c3561;
    }
    .nav > li > a:hover {
        background-color: #3eb57f !important;
    }
    .select {
        background-color: #3e75bf;
    }

    .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 3px;
        background-color: #0cc1f1;
        transition: all .2s;
        -webkit-transition: all .2s;
    }
    .layui-tab-title li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        color: white;
        vertical-align: middle;
        font-size: 16px;
        transition: all .2s;
        -webkit-transition: all .2s;
        position: relative;
        line-height: 20px;
        min-width: 65px;
        padding: 0 15px;
        text-align: center;
        cursor: pointer;
    }
    .layui-tab-title .layui-this {
        color: white;
    }
    .layui-tab-title .layui-this:after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 30px;
        border-width: unset;
        border-style: unset;
        border-bottom: 5px solid #0cc1f1;
        /*background-color: #0d3b6b;*/
    }

    .layui-tab-title {
        position: relative;
        left: 0;
        height: 30px;
        white-space: nowrap;
        font-size: 0;
        border-bottom-width: 0px;
        border-bottom-style: solid;
        transition: all .2s;
        -webkit-transition: all .2s;
    }
    .layui-tab-title li {
        color: #000000;
    }
    .layui-tree-txt {
        display: inline-block;
        vertical-align: middle;
        color: white;
    }
    .layui-nav-tree .layui-nav-item {
        line-height: 90%; !important;
    }
</style>
<body class="layui-layout-body fixed-sidebar layui-skin-balck">
<div class="layui-layout layui-layout-admin  " id="box">
    <div class="layui-header">
        <div class="layui-logo">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#" style="color: white">
                <span class="clear">
                    <span class="block m-t-xs" style="font-size:20px;">
                        <i class="fa fa-area-chart"></i>
                        <strong class="font-bold">数据开发工具</strong>
                    </span>
                </span>
            </a>
        </div>
        <ul class="layui-nav layui-layout-left">
            <!-- 显示/隐藏菜单 -->
            <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i></a></li>
            <li class="layui-nav-item"><a href="index.html">数据开发</a></li>
            <li class="layui-nav-item  layui-nav-item-active"><a href="query.html">自助分析</a></li>
            <li class="layui-nav-item"><a href="stream.html">流式计算</a></li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">运维管理<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">测试用户</a>
                <dl class="layui-nav-child" style="text-align: center">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
        </ul>
    </div>
    <div class="layui-side" id="top" >
        <div class="layui-tab">
            <div class="layui-tab-content " style="padding: 0px;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-side-scroll sidebar-collapse">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入任务名称查询" class="layui-input" style="width: 200px;margin: 0px">
                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item" id="fltre1e">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-body" id="bottom">
        <div class="layui-tab layui-tab-brief" id="Body-main" style="margin-top: 30px;" lay-filter="demo"  lay-allowclose="true">
            <div id="myTabContent" class="layui-tab-content" style="height: 100%">
                <div class="tab-pane active" id="jbxx" style="height: 100%">
                    <iframe id="J_iframe" width="100%" height="100%" src="" style="min-height: 500px" frameborder="0" scrolling="auto" data-id="index_v1.html" seamless></iframe>
                </div>
            </div>
        </div>
    </div>

    <div id="line"></div>
    <div class="layui-footer">
        © inspur.com
    </div>
</div>
<script src="../../skins/plugins/jquery.min.js?v=2.1.4"></script>
<script src="../../skins/plugins/bootstrap.min.js?v=3.3.6"></script>
<script src="../../skins/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../../skins/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../../skins/plugins/layer/layer.min.js"></script>
<script src="../../skins/plugins/layui/layui.js"></script>
<script src="../../skins/develop/js/index.js"></script>
<script>
    //JavaScript代码区域

    layui.use('element', function(){
        var element = layui.element;
        //监听导航点击
        element.on('tab(demo)', function(elem){
            var id=$(this).attr("lay-id");
            var zeppelinUrl = $(this).attr("zeppelinUrl");
            refresh(id,zeppelinUrl);
        });
        //获取所有的菜单
        $.ajax({
            type:"GET",
            url:"/sql/queryGroupJobSql",
            dataType:"json",
            success:function(data){
                //先添加所有的主材单
                var content;
                $.each(data.data,function(i,obj){
                    if(obj.childrenList!=null)//添加子任务  后期改成递归的形式
                    {
                        content='<li class="layui-nav-item">';
                        content+='<a href="javascript:;">'+obj.name+'</a>';
                        content+=loadchild(obj);
                        content+='</li>';
                    }else
                    {
                        content='<li class="layui-nav-item">';
                        content+='<a href="javascript:queryNoteInfo(\''+obj.id+'\',\''+obj.name+'\',\''+obj.zeppelinUrl+'\')">'+obj.name+'</a>';
                        content+='</li>';
                    }
                    $(".layui-nav-tree").append(content);
                });

                element.init();
            },
            error:function(jqXHR){
                alert("发生错误："+ jqXHR.status);
            }
        });
        //组装子菜单的方法
        function loadchild(obj){
            if(obj==null){
                return;
            }
            var content='';
            if(obj.childrenList!=null && obj.childrenList.length>0){
                content+='<dl class="layui-nav-child">';
            }else{
                content+='<dl>';
            }
            if(obj.childrenList!=null && obj.childrenList.length>0){
                $.each(obj.childrenList,function(i,note){
                    content+='<dd>';
                    content+='<a href="javascript:queryNoteInfo(\''+note.id+'\')">'+note.name+'</a>';
                    if(note.childrenList==null){
                        return;
                    }
                    content+=loadchild(note);
                    content+='</dd>';
                });
                content+='</dl>';
            }
            //console.log(content);
            return content;
        }
    });

    function refresh(id,zeppelinUrl){
        $("#J_iframe").attr("src","http://"+zeppelinUrl+"/#/notebook/"+id);
    }

    function  queryNoteInfo(id,name,zeppelinUrl) {
        var tab = $('<li class="layui-this" lay-id="'+id+'" zeppelinUrl="'+zeppelinUrl+'">'+name+'</li>');
        $("#myTab").append(tab);
        $("#J_iframe").attr("src","http://"+zeppelinUrl+"/#/notebook/"+id);
    }
</script>
</body>
</html>
